<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 0;
            margin: 0;
            background-color: yellow;
        }
        div #header{
            position: fixed;
            top: 0;
            bottom: 80%;
            left: 20%;
            right: 0;
            background: gray;
            margin-bottom: 4px;
        }
        div #sidebar{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 80%;
            background-color: silver;
            margin-right: 4px;
        }
        div #main{
            position: absolute;
            top: 20%;
            bottom: 0;
            left: 20%;
            right: 0;
            overflow: scroll;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <div id="header">
        这里是标题帧
    </div>
    <div id="sidebar">
        这里是边栏帧
    </div>
    <div id="main">
        这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区最开始载入的
        时候不被遮挡，同时去设置滚动条，从而能够拖动查看下面的文本区域。</br>
        下面的是凑数文字了
        这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了这里是内容区，此处知识点，是演示标题侧边固定后，怎么让内容区的滚动不出现
        被遮挡的情况。
        下面的是凑数文字了

    </div>
</div>
</body>
</html>